<div>
    <form clrForm #settingForm="ngForm">
        <div *ngIf="item">
            <clr-input-container>
                <label>{{'APP_LDAP_ADDRESS'|translate}}</label>
                <input clrInput [(ngModel)]="item.vars['ldap_address']" name="address" size=45/>
            </clr-input-container>
            <clr-input-container>
                <label>{{'APP_LDAP_PORT'|translate}}</label>
                <input clrInput [(ngModel)]="item.vars['ldap_port']" name="port" size=45/>
            </clr-input-container>
            <clr-input-container>
                <label>{{'APP_LDAP_USERNAME'|translate}}</label>
                <input clrInput [(ngModel)]="item.vars['ldap_username']" name="username" size=45/>
                <clr-control-helper>{{'APP_LDAP_USERNAME_HELPER'|translate}}</clr-control-helper>
            </clr-input-container>
            <clr-input-container>
                <label>{{"APP_LDAP_PASSWORD"|translate}}</label>
                <input clrInput  type="password" size="45" name="password" [(ngModel)]="item.vars['ldap_password']"/>
            </clr-input-container>
            <clr-input-container>
                <label>{{'APP_LDAP_DN'|translate}}</label>
                <input clrInput [(ngModel)]="item.vars['ldap_dn']" name="dn" size=45/>
                <clr-control-helper>{{'APP_LDAP_DN_HELPER'|translate}}</clr-control-helper>
            </clr-input-container>
            <clr-input-container>
                <label>{{'APP_LDAP_FILTER'|translate}}</label>
                <input clrInput [(ngModel)]="item.vars['ldap_filter']" name="filter" size=45/>
                <clr-control-helper>{{'APP_LDAP_FILTER_HELPER'|translate}}</clr-control-helper>
            </clr-input-container>
            <clr-select-container>
                <label>{{'APP_STATUS'|translate}}</label>
                <select class="input-width" clrSelect name="status" [(ngModel)]="item.vars['ldap_status']" required>
                    <option value="ENABLE">{{'APP_STATUS_ENABLE'|translate}}</option>
                    <option value="DISABLE">{{'APP_STATUS_DISABLE'|translate}}</option>
                </select>
            </clr-select-container>
            <br>
            <span>{{'APP_LDAP_MSG'|translate}}</span>
        </div>
    </form>
    <button class="btn btn-primary" (click)="onSync()"
            [disabled]="settingForm.invalid">{{'APP_SYNC'|translate}}</button>
    <button class="btn btn-info-outline" (click)="onSubmit()"
            [disabled]="settingForm.invalid">{{'APP_COMMIT'|translate}}</button>
</div>
